<template>
  <div class="person-auth" ww3 auto>
    <el-page-header @back="goBack" content="个人实名认证"> </el-page-header>
    <el-tag type="warning" style="width: 100%; margin-bottom: 20px"
      >同一主体只能验证一个账号，验证后不可撤销</el-tag
    >
    <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
      <p>账号信息</p>
    </div>
    <el-divider class="samll-der"></el-divider>
    <el-form inline label-width="134px">
      <div class="form-content">
        <!-- <file-upload></file-upload> -->
        <div>
          <el-form-item label="昵称" required>
            <el-input style="width: 300px;" v-model="user.nickname" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号" required>
            <el-input style="width: 300px;" v-model="user.phonenumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="UID" required>
            <el-input style="width: 300px;"  v-model="user.uid" disabled></el-input>
          </el-form-item>
        </div>
        <el-form-item label="头像" required>
          <file-upload :type="'photo'"></file-upload>
        </el-form-item>
      </div>
      <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
        <p>授权书</p>
      </div>
      <el-divider class="samll-der"></el-divider>
      <el-form-item label="原创授权书" required>
        <file-upload :type="'originalAuthorization'" @savefileFun="savefileFun" ref="originalAuthorization"></file-upload> 
        <div class="example">下载范本</div>
      </el-form-item>
      <el-form-item label="肖像授权书">
        <file-upload :type="'portraitAuthorization'" @savefileFun="savefileFun" ref="portraitAuthorization"></file-upload>
        <div class="example">下载范本</div>
      </el-form-item>
      <el-form-item label="物权授权书">
        <file-upload :type="'letterOfAuthorization'" @savefileFun="savefileFun" ref="letterOfAuthorization"></file-upload>
        <div class="example">下载范本</div>  
      </el-form-item>
      <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
        <p>认证资料</p>
      </div>
      <el-divider class="samll-der"></el-divider>
      <el-form-item class="special" label="实名认证说明">
        <file-upload :type="'realName'" @savefileFun="savefileFun" ref="realName"></file-upload> 
        <div class="explain">上传已签署协议照片或扫描件，签署人须与实人认证一致，图片大小不超过10M，所有待填写项必须手写
          <div class="example" style="text-align:left">下载验证声明模板</div>
        </div>
      </el-form-item>
      <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
        <p>认证信息</p>
      </div>
      <el-divider class="samll-der"></el-divider>
      <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
        <p>如果之前做过’实名认证‘，那么’实人认证‘需要与之前的身份一致</p>
      </div>
      <div class="check-bank" fz-14 black flex flex-c style="margin-bottom: 30px;margin-top:16px">
        <p>请保证上传的身份证照片清晰可辨，信息不能有遮挡和反光，否则将认证失败</p>
      </div>
      <div>
        <el-form-item label="真实姓名" required>
          <el-input style="width:300px" v-model="saveData.userName" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" required>
          <el-input style="width:300px" v-model="saveData.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="身份证照片" required>
          <div class="ID-content">
            <div class="id-item">
              <!-- <img src="../../assets/top.png" alt="">
              <i class="el-icon-plus id-icon"></i> -->
              <card-upload :type="'idCardImgz'" @savefileFun="savefileFun" ref="idCardImgz"/>
            </div>
            <div class="id-item"> 
              <!-- <img src="../../assets/back.png" alt=""> 
              <i class="el-icon-plus id-icon"></i> -->
              <card-upload :type="'idCardImgb'" @savefileFun="savefileFun" ref="idCardImgb"/>
            </div>
          </div>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="常驻地区">
          <el-input style="width:300px" v-model="saveData.permanentAddress" placeholder="请输入常驻地址"></el-input>
        </el-form-item>
      </div>
      <div class="step-content">
        <div class="svg-content">
          <svg width="624" height="241" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class=""><defs><path d="M.293 33.707a1 1 0 0 1 0-1.414L15.586 17 .293 1.708A1 1 0 1 1 1.707.294l16 16a1 1 0 0 1 0 1.413l-16 16a.998.998 0 0 1-1.414 0z" id="b"></path><path d="M.293 33.707a1 1 0 0 1 0-1.414L15.586 17 .293 1.708A1 1 0 1 1 1.707.294l16 16a1 1 0 0 1 0 1.413l-16 16a.998.998 0 0 1-1.414 0z" id="d"></path><path d="M.293 33.707a1 1 0 0 1 0-1.414L15.586 17 .293 1.708A1 1 0 1 1 1.707.294l16 16a1 1 0 0 1 0 1.413l-16 16a.998.998 0 0 1-1.414 0z" id="f"></path><filter x="-19.4%" y="-7.4%" width="138.9%" height="120.6%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1"></feColorMatrix></filter><filter x="-19.4%" y="-7.4%" width="138.9%" height="120.6%" filterUnits="objectBoundingBox" id="c"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1"></feColorMatrix></filter><filter x="-19.4%" y="-7.4%" width="138.9%" height="120.6%" filterUnits="objectBoundingBox" id="e"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1"></feColorMatrix></filter></defs><g fill="none" fill-rule="evenodd"><g transform="translate(472.2 94.8)"><use fill="#000" filter="url(#a)" xlink:href="#b"></use><use fill="#FFF" xlink:href="#b"></use></g><g transform="translate(508.2)"><g stroke-width=".6" fill="#fff"><rect stroke="#DADADA" fill="#D9DCDE" fill-rule="nonzero" x=".3" y=".3" width="115.2" height="240" rx="13.8"></rect><path stroke-opacity=".5" stroke="#F1F2F4" d="M87.662 7.266v-.08c.001-1.898.492-2.686 2.483-2.686h9.114c7.861 0 12.641 4.775 12.641 12.628v206.344c0 7.853-4.78 12.628-12.641 12.628H17.14c-7.86 0-12.64-4.775-12.64-12.628V17.128C4.5 9.275 9.28 4.5 17.141 4.5h9.209c2.036 0 2.483.78 2.483 2.86 0 3.062 2.43 5.674 6.346 5.674h46.137c3.931 0 6.346-2.623 6.346-5.768z"></path></g><text font-family="PingFangSC-Regular, PingFang SC" font-size="12" fill="#555"><tspan x="40.2" y="38.4">请眨眼</tspan></text><circle fill="#F6F9FC" cx="58.3" cy="120.5" r="46.5"></circle><path d="M58.72 96.01c-13.763 0-24.91 11.147-24.91 24.91 0 13.761 11.147 24.908 24.91 24.908 13.761 0 24.908-11.147 24.908-24.909 0-13.762-11.147-24.908-24.909-24.908zm0 7.473a7.478 7.478 0 0 1 7.472 7.473 7.47 7.47 0 0 1-7.473 7.472 7.47 7.47 0 0 1-7.472-7.472 7.478 7.478 0 0 1 7.472-7.473zm0 35.37c-6.24 0-11.72-3.188-14.946-8.02.062-4.945 9.976-7.672 14.945-7.672 4.97 0 14.87 2.727 14.945 7.672-3.225 4.832-8.705 8.02-14.945 8.02z" fill="#EDEDED" fill-rule="nonzero"></path></g><g stroke-width=".6" transform="translate(339)" fill="#fff"><rect stroke="#DADADA" fill="#D9DCDE" fill-rule="nonzero" x=".3" y=".3" width="115.2" height="240" rx="13.8"></rect><path stroke-opacity=".5" stroke="#F1F2F4" d="M87.662 7.266v-.08c.001-1.898.492-2.686 2.483-2.686h9.114c7.861 0 12.641 4.775 12.641 12.628v206.344c0 7.853-4.78 12.628-12.641 12.628H17.14c-7.86 0-12.64-4.775-12.64-12.628V17.128C4.5 9.275 9.28 4.5 17.141 4.5h9.209c2.036 0 2.483.78 2.483 2.86 0 3.062 2.43 5.674 6.346 5.674h46.137c3.931 0 6.346-2.623 6.346-5.768z"></path></g><g transform="translate(352.8 172.2)"><rect fill="#F6F9FC" fill-rule="nonzero" width="87.6" height="18" rx="3"></rect><text font-family="PingFangSC-Regular, PingFang SC" font-size="7" fill="#777"><tspan x="29.8" y="12.2">立即开始</tspan></text></g><text font-family="PingFangSC-Regular, PingFang SC" font-size="12" fill="#555" transform="translate(339)"><tspan x="33.6" y="38.4">开始刷脸</tspan></text><path d="M348.3 78.9h82.8v-4.8h-82.8zm0 11.4h40.8v-4.8h-40.8zm0 12h71.4v-4.8h-71.4zm-.6 12h40.8v-4.8h-40.8z" fill="#EDEDED" fill-rule="nonzero" stroke="#EDEDED" stroke-width=".6"></path><g stroke-width=".6" fill="#fff"><rect stroke="#DADADA" fill="#D9DCDE" fill-rule="nonzero" x=".3" y=".3" width="115.2" height="240" rx="13.8"></rect><path stroke-opacity=".5" stroke="#F1F2F4" d="M87.662 7.266v-.08c.001-1.898.492-2.686 2.483-2.686h9.114c7.861 0 12.641 4.775 12.641 12.628v206.344c0 7.853-4.78 12.628-12.641 12.628H17.14c-7.86 0-12.64-4.775-12.64-12.628V17.128C4.5 9.275 9.28 4.5 17.141 4.5h9.209c2.036 0 2.483.78 2.483 2.86 0 3.062 2.43 5.674 6.346 5.674h46.137c3.931 0 6.346-2.623 6.346-5.768z"></path></g><text font-family="PingFangSC-Regular, PingFang SC" font-size="12" fill="#555"><tspan x="28.2" y="38.4">打开支付宝</tspan></text><path d="M72.913 84.369l-9.61-3.232s.738-1.106 1.526-3.273c.789-2.168.902-3.359.902-3.359l-6.222-.05v-2.126l7.535-.053v-1.502h-7.536v-3.42h-3.69v3.42h-7.03v1.502l7.03-.05v2.28h-5.639v1.19h11.606s-.128.966-.572 2.167c-.445 1.202-.903 2.255-.903 2.255s-5.45-1.908-8.322-1.908c-2.871 0-6.364 1.154-6.703 4.502-.337 3.347 1.627 5.16 4.394 5.827 2.767.67 5.322-.007 7.546-1.096 2.225-1.087 4.407-3.559 4.407-3.559l11.201 5.44a5.528 5.528 0 0 1-5.452 4.59H48.567a5.527 5.527 0 0 1-5.532-5.523V69.567a5.528 5.528 0 0 1 5.522-5.532h18.824a5.528 5.528 0 0 1 5.532 5.522V84.37zm-14.007-1.873s-3.497 4.414-7.616 4.414c-4.122 0-4.987-2.097-4.987-3.605 0-1.507.856-3.146 4.363-3.383 3.505-.237 8.242 2.574 8.242 2.574h-.002z" fill="#02A9F1" fill-rule="nonzero"></path><g transform="translate(169.2)"><g stroke-width=".6" fill="#fff"><rect stroke="#DADADA" fill="#D9DCDE" fill-rule="nonzero" x=".3" y=".3" width="115.2" height="240" rx="13.8"></rect><path stroke-opacity=".5" stroke="#F1F2F4" d="M87.662 7.266v-.08c.001-1.898.492-2.686 2.483-2.686h9.114c7.861 0 12.641 4.775 12.641 12.628v206.344c0 7.853-4.78 12.628-12.641 12.628H17.14c-7.86 0-12.64-4.775-12.64-12.628V17.128C4.5 9.275 9.28 4.5 17.141 4.5h9.209c2.036 0 2.483.78 2.483 2.86 0 3.062 2.43 5.674 6.346 5.674h46.137c3.931 0 6.346-2.623 6.346-5.768z"></path></g><text font-family="PingFangSC-Regular, PingFang SC" font-size="12" fill="#555"><tspan x="29.4" y="38.4">扫描认证码</tspan></text><rect fill="#F6F9FC" fill-rule="nonzero" x="8.8" y="64" width="97.8" height="126" rx="3"></rect><text font-family="PingFangSC-Regular, PingFang SC" font-size="7" fill="#777"><tspan x="26.8" y="202">放入框内，自动扫描</tspan></text><path d="M19.598 171.561v7.639h8.085v.6H19v-8.239h.598zm76.801 0l.001 8.09-.15-.001v.15h-7.486v-.6h7.037v-7.639h.598zM96.4 75.4l-.001 8.088h-.598v-7.489h-7.037V75.4H96.4zm-68.717 0v.599h-8.085v7.489H19V75.4h8.683z" stroke="#AEC0CB" stroke-width=".6" stroke-linecap="square"></path></g><g transform="translate(133.8 97.2)"><use fill="#000" filter="url(#c)" xlink:href="#d"></use><use fill="#FFF" xlink:href="#d"></use></g><g transform="translate(303 98.4)"><use fill="#000" filter="url(#e)" xlink:href="#f"></use><use fill="#FFF" xlink:href="#f"></use></g></g></svg>
        </div>
        <div class="right-msg">
          <span style="margin-right:16px">简单几步，极速认证</span>
          <el-checkbox></el-checkbox>
          <span style="margin-left:6px">同意</span>
          <span class="agreement">《身份验证协议》</span>
        </div>
      </div>
      <div class="check-bank" fz-14 black flex flex-c style="margin-top: 30px">
        <p>代表作品</p>
      </div>
      <el-divider class="samll-der"></el-divider>
      <el-form-item class="special" label="代表作视频" required>
        <!-- <file-upload :type="'photo'"></file-upload> -->
        <video-upload :type="'representativeVideo'" @savefileFun="savefileFun"  ref="representativeVideo"/>
        <div class="explain center">请上传您的代表作视频，视频大小不超过100M</div> 
      </el-form-item>
    </el-form>
    <div class="center flex-start">
      <el-checkbox v-model="messageCheck"></el-checkbox>
      <span style="margin-left:6px">确认信息准确无误，提交后不可更改</span>
    </div>
    <div class="center flex-start" style="margin-top: 20px">
      <el-checkbox v-model="tyCheck"></el-checkbox>
      <span style="margin-left:6px">同意</span>
      <span class="agreement">《BUZO作品上传及销售服务协议》</span>
    </div>
    <span class="submit-btn" @click="cmsAuthenticationSave">提交</span>
  </div>
</template>

<script>
import $http from "@/api/info/info"
import FileUpload from "@/components/FileUpload.vue"
import cardUpload from "@/components/cardUpload.vue"
import videoUpload from "@/components/videoUpload.vue"
import $httpLogin from "@/api/login/login"
export default {
  components: {
    FileUpload,
    cardUpload,
    videoUpload
  },
  data() {
    return {
      messageCheck: false,
      tyCheck: false,  
      fileUrl: this.$url.fileUrl,
      type: '',
      user: {},
      cmsAuthentication: {},
      saveData: {
        type: "1",
        userName: "",
        idCardImgz: "",
        idCardImgb: "",
        permanentAddress: "",
        idCard: "",
        realName: "",
        representativeVideo: "",
        originalAuthorization: "",
        portraitAuthorization: "",
        letterOfAuthorization: "",
        vipps: "1",
        userId: "",
      },
      loadingIndex: null,
    }
  },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem("user")).sysUser;
    this.cmsAuthentication = JSON.parse(sessionStorage.getItem("user")).cmsAuthentication;
    this.setAuthenticationStatus();
  },
  methods: {
    /**
     * 验证
     * 
     * originalAuthorization 原创授权书
      portraitAuthorization 
     */
    yzInput() {
      if(!this.saveData.originalAuthorization) {
        this.$message.error('请选择原创授权书');
        return false;
      } else if(!this.saveData.portraitAuthorization) {
        this.$message.error('请选择肖像授权书');
        return false;
      }else if(!this.saveData.letterOfAuthorization) {
        this.$message.error('请选择物权授权书');
        return false;
      }else if(!this.saveData.realName) {
        this.$message.error('请选择实名认证说明');
        return false;
      }else if(!this.saveData.userName) {
        this.$message.error('真实姓名不能为空');
        return false;
      }else if(!this.saveData.idCard) {
        this.$message.error('身份证号不能为空');
        return false;
      }else if(!this.saveData.idCardImgz || !this.saveData.idCardImgb) {
        this.$message.error('请选择身份证照片');
        return false;
      }else if(!this.saveData.permanentAddress) {
        this.$message.error('常驻地区不能为空');
        return false;
      }else if(!this.saveData.representativeVideo) {
        this.$message.error('请选择代表作视频');
        return false;
      } else if(!this.messageCheck) {
        this.$message.error('请勾选确认信息准确无误，提交后不可更改');
        return false;
      } else if(!this.tyCheck) { 
        this.$message.error('请勾选同意《BUZO作品上传及销售服务协议》');
        return false;
      }

      return true;
    },

    /**
     * 获取认证新增还是编辑
     */
    setAuthenticationStatus() {

      if(!this.cmsAuthentication) {
        this.type = 'add';
        this.saveData = {
          type: "1",
          userName: "",
          idCardImgz: "",
          idCardImgb: "",
          permanentAddress: "",
          idCard: "",
          realName: "",
          representativeVideo: "",
          originalAuthorization: "",
          portraitAuthorization: "",
          letterOfAuthorization: "",
          vipps: "1",
          userId: "",
        }
      } else {
        console.log(this.cmsAuthentication);
        this.type = 'update';
        this.saveData = this.cmsAuthentication;
        this.$refs.originalAuthorization.initImg(this.fileUrl + this.cmsAuthentication.originalAuthorization);
        this.$refs.portraitAuthorization.initImg(this.fileUrl + this.cmsAuthentication.portraitAuthorization);
        this.$refs.letterOfAuthorization.initImg(this.fileUrl + this.cmsAuthentication.letterOfAuthorization);
        this.$refs.realName.initImg(this.fileUrl + this.cmsAuthentication.realName);
        this.$refs.idCardImgz.initImg(this.fileUrl + this.cmsAuthentication.idCardImgz);
        this.$refs.idCardImgb.initImg(this.fileUrl + this.cmsAuthentication.idCardImgb);
        this.$refs.representativeVideo.initImg(this.fileUrl + this.cmsAuthentication.representativeVideo);
      }
    },
    /**
     * 获取用户信息
     */
    getUserInfo(phone) {
        let that = this;
        let data = {
            phone: phone
        }
        $httpLogin.getUserInfo(data).then((res) => {
            console.log("获取用户信息",res);
            if(res.code == 0) {
              sessionStorage.setItem("user", JSON.stringify(res.data));
              that.user = res.data.sysUser;
              that.showModify = false;
              that.loadingIndex.close();
              that.$message({
                  message: '提交成功',
                  type: 'success'
              });
              that.goBack();
            }
        })
    },
    /**
     * 保存文件路径
     */
    savefileFun(data) {
      this.saveData[data.type] = data.fileUrl;
      console.log(this.saveData);
    },
    goBack() {
      this.$router.go(-1)
    },
    /**
     * 个人认证保存接口
     */
    cmsAuthenticationSave() {
      let that = this;
      let data = this.saveData;
      data.userId = sessionStorage.getItem("userId");
      data.userList = [
        {
            "nickname": "",
            "phone": "",
            "avatar": ""
        }
      ];
      let yzInput = this.yzInput();
      if(!yzInput) {
        return;
      }
      this.loadingIndex = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if(this.type === 'add') {
        $http.cmsAuthenticationSave(data).then(res => {
          if(res.code == 0) {
            this.getUserInfo(this.user.userId);
          }
        })
      } else {
        $http.cmsAuthenticationUpdate(data).then(res => {
          if(res.code == 0) {
            this.getUserInfo(this.user.userId)
          }
        })
      }
      
    },
    /**
     * 个人认证编辑接口
     */
    cmsAuthenticationUpdate() {
      let that = this;
      let data = this.saveData;
      $http.cmsAuthenticationUpdate(data).then(res => {
        if(res.code == 0) {
          this.getUserInfo(this.user.userId);
        }
      })
    }
  }
}
</script>

<style scoped>
.person-auth >>> .el-form-item__content{
  min-width: 200px;
}
.submit-btn{
  cursor: pointer;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: var(--green);
  color: var(--footer-color);
  border-radius: 6px;
}
.center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-start{
  width: 274px;
  justify-content: flex-start;
  margin: 0 auto;
}
.center span{
  font-size: var(--content);
}
.right-msg{
  margin-left: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.right-msg span{
  font-size: var(--content);
}
.agreement{
  color: var(--green);
  cursor: pointer;
}
.step-content{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 120px;
}
.ID-content{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.id-item{
  cursor: pointer;
  position: relative;
  margin-right: 110px;
}
.id-icon{
  position: absolute;
  top: 50px;
  left: 120px;
  font-size: 40px;
  color: var(--green);
}
.check-bank .icon {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  margin-right: 4px;
}
.example{
  text-align: center;
  color: var(--green);
  cursor: pointer;
}
.explain{
  padding: 20px;
}
.special >>> .el-form-item__content{
  display: inline-flex;
}
</style>